<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>Vue 的Component组件</title>
	</head>

	<body>
		<div id="app">
			<h3>Component-1的声明应用</h3>
			<hr />
			<hjh></hjh>
			<hong></hong>
		</div>
		<hr />
		<!--定义的是全局的组件，也需要放在构造器里面-->
		<!--同样的组件，不同的构造器都是可行的-->
		<div id="ppa">
			<h3>Component-1</h3>
			<hjh></hjh>
		</div>
		<script src="../assets/js/vue.min.js"></script>
		<script type="text/javascript">
			//component 只能定义一个组件
			Vue.component('hjh', {
				template: `<h3 style="color:red"> 这是个全局component的组件 </h3>`
			})
			var vm = new Vue({
				el: '#app',
				data: {
					message: 'Hello, Vue.js!!'
				},
				components: { //components 	可以定义多个组件
						"hong": { // 字符串
							template: `<h5 style="color:green"> 我是局部component的组件 </h5>`
						}

					}
			})
			var ppa = new Vue({
				el: '#ppa',
				data: {
					message: 'Hello, Vue.js!!'
				}
			})
		</script>
	</body>

</html>